<template>
  <div class="">
    <h1>todolist</h1>
    <input type="text" v-model="title" @keydown.enter="add" />

    <div class="wrap">
      <div>
        <ul>
          <h1>已完成</h1>
          <li
            v-for="(item, index) in list"
            :key="index"
            v-show="item.status == true"
          >
            <input
              type="checkbox"
              :checked="item.status"
              @change="change(index)"
            />
            <span>{{ item.title }} </span>
          </li>
        </ul>
        <ul>
          <h1>未完成</h1>
          <li
            v-for="(item, index) in list"
            :key="index"
            v-show="item.status == false"
          >
            <input
              type="checkbox"
              :checked="item.status"
              @change="change(index)"
            />
            <span>{{ item.title }} </span>
          </li>
        </ul>
      </div>
      <div>
        <ul>
          <h1>全部任务</h1>
          <li v-for="(item, index) in list" :key="index">
            <input
              type="checkbox"
              :checked="item.status"
              @change="change(index)"
            />
            <span>{{ item.title }} </span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          title: "吃饭",
          status: false,
        },
        {
          title: "睡觉",
          status: true,
        },
        {
          title: "打豆豆",
          status: false,
        },
        {
          title: "敲代码",
          status: false,
        },
        {
          title: "杀崔猛",
          status: true,
        },
      ],
      title: "",
    };
  },
  mounted() {},
  methods: {
    change(index) {
      this.list[index].status = !this.list[index].status;
    },
    add() {
      this.list.push({ title: this.title, status: false });
      this.title = "";
    },
  },
};
</script>

<style lang="scss" scoped>
// scoped加上后样式才变成局部的
.wrap {
  display: flex;
  width: 100%;
  > div {
    width: 50%;
    border: 1px solid red;
  }
}
</style>
